<template>
  <div class="app-container">
    <el-form :inline="true" @submit.native.prevent>
      <el-form-item label="菜单名称">
        <el-input
          v-model="listQuery.name"
          placeholder="请输入菜单名称,回车搜索"
          style="width: 300px"
          @keyup.enter.native="handleResetPage"
        >
          <el-button slot="append" icon="el-icon-search" @click="handleResetPage" />
        </el-input>
      </el-form-item>
      <el-button type="primary" @click="handleCreate({code:0,name:'顶级菜单'})">新增</el-button>
    </el-form>
    <el-table
      v-loading="listLoading"
      :data="tableData"
      style="width: 100%;margin-bottom: 20px;"
      row-key="id"
      border
      :default-expand-all="false"
      :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
    >
      <el-table-column label="菜单名称" prop="name" />
      <el-table-column label="路由" prop="router" />
      <el-table-column label="组件名称" prop="componentName" />
      <el-table-column label="组件路径" prop="component" />
      <el-table-column label="菜单图标" prop="icon" />
      <el-table-column label="排序" prop="sortNumber" align="center" width="80" />
      <el-table-column label="状态" width="110" align="center">
        <template slot-scope="scope">
          {{ statusFilter(scope.row) }}
        </template>
      </el-table-column>
      <el-table-column width="300" label="操作" align="center">
        <template slot-scope="scope">
          <el-button size="small" type="primary" @click="handleCreate(scope.row)">新增</el-button>
          <el-button size="small" type="primary" @click="handleInfo(scope.row)">查看</el-button>
          <el-button size="small" type="primary" @click="handleEdit(scope.row)">编辑</el-button>
          <el-button size="small" type="danger" @click="handleDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div v-if="!listLoading">
      <el-pagination
        :current-page.sync="listQuery.pageVO.pageIndex"
        :page-sizes="[20, 30, 50, 80]"
        :page-size="listQuery.pageVO.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="count"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
    <!-- 弹窗 -->
    <el-dialog
      :title="dialogFormStatus"
      :visible.sync="dialogFormVisible"
      form
      width="40%"
      destroy-on-close
      lock-scroll
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :show-close="false"
    >
      <el-form
        ref="form"
        :disabled="type === 'info'"
        :rules="rules"
        :model="form"
        label-width="110px"
        @submit.native.prevent
      >
        <!-- <el-form-item label="父级菜单名称">
          <el-select v-model="form.parentName" placeholder="请选择">
            <el-option
              v-for="item in menuOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item> -->
        <el-form-item v-if="type === 'add'" label="父级菜单名称">
          <el-input v-model="form.parentName" disabled />
        </el-form-item>

        <el-form-item label="菜单名称" prop="name">
          <el-input v-model="form.name" />
        </el-form-item>
        <el-form-item label="链接" prop="router">
          <el-input v-model="form.router" placeholder="/或/#/后的路径如：/basic/menu，父级菜单填/basic" />
        </el-form-item>
        <el-form-item label="组件名称" prop="componentName">
          <el-input v-model="form.componentName" placeholder="路由组件的名称，请勿重复" />
        </el-form-item>
        <el-form-item label="组件路径" prop="component">
          <el-input v-model="form.component" placeholder="@/views下的路径如：/basic/menu，父级菜单填Layout" />
        </el-form-item>
        <el-form-item label="排序" prop="sortNumber">
          <el-input v-model="form.sortNumber" />
        </el-form-item>
        <el-form-item label="菜单图标" prop="icon">
          <el-input v-model="form.icon" placeholder="仅一级菜单填写图标名" />
        </el-form-item>
        <el-form-item label="状态">
          <el-radio-group v-model="form.moduleStatus">
            <el-radio :label="1">启用</el-radio>
            <el-radio :label="0">停用</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleCancelDialog()">取 消</el-button>
        <el-button type="primary" @click="submitForm('form')">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      listLoading: false,
      listQuery: {
        pageVO: {
          pageIndex: 1,
          pageSize: 20
        },
        name: '',
        parentCode: '0'
      },
      count: 0, // 总数
      tableData: [],
      dialogFormStatus: '',
      dialogFormVisible: false,
      type: '',
      form: {
        // 新增和编辑数据存放
        code: '',
        id: undefined,
        name: '',
        router: '',
        component: '',
        componentName: '',
        icon: '',
        sortNumber: '',
        moduleStatus: 1,
        parentId: 0,
        parentName: '',
        moduleType: 0
      },
      menuOptions: [{
        value: '1',
        label: '顶级菜单'
      }, {
        value: '2',
        label: '基础功能'
      }],
      rules: {
        name: [{ required: true, message: '请输入菜单名称', trigger: 'blur' }],
        router: [
          { required: true, message: '请输入路由地址', trigger: 'blur' }
        ],
        component: [
          { required: true, message: '请输入组件路径', trigger: 'blur' }
        ],
        componentName: [
          { required: true, message: '请输入组件名称', trigger: 'blur' }
        ],
        sortNumber: [{ required: true, message: '请输入排序', trigger: 'blur' }]
      }
    }
  },
  created() {
    this.search()
  },
  methods: {
    statusFilter(row) {
      if (row.moduleStatus === 1) return '启用'
      else if (row.moduleStatus === 0) return '停用'
      else return ' '
    },
    search() {
      this.tableData = [{
        id: 1,
        router: '/Basic',
        name: '基础功能',
        componentName: 'basic',
        component: 'Layout',
        icon: '',
        sortNumber: '1',
        moduleStatus: 1,
        children: [{
          id: 31,
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄'
        }, {
          id: 32,
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄'
        }]
      }, {
        id: 2,
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1519 弄',
        children: [{
          id: 33,
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄'
        }, {
          id: 35,
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄'
        }]
      }]
    },
    // 点击新增
    handleCreate(row) {
      this.form.parentName = row.name
      this.type = 'add'
      this.dialogFormStatus = '新增'
      this.dialogFormVisible = true
    },
    // 点击查看菜单
    handleInfo(row) {
      this.form = {
        code: row.code,
        id: row.id,
        name: row.name,
        router: row.router,
        component: row.component,
        componentName: row.componentName,
        icon: row.icon,
        sortNumber: row.sortNumber,
        moduleStatus: row.moduleStatus,
        parentId: row.parentId
      }
      this.dialogFormStatus = '查看'
      this.type = 'info'
      this.dialogFormVisible = true
    },
    // 点击编辑菜单
    handleEdit(row) {
      this.form = {
        code: row.code,
        id: row.id,
        name: row.name,
        router: row.router,
        component: row.component,
        componentName: row.componentName,
        icon: row.icon,
        sortNumber: row.sortNumber,
        moduleStatus: row.moduleStatus,
        parentId: row.parentId,
        parentName: this.form.parentName,
        moduleType: row.moduleType
      }
      this.dialogFormStatus = '编辑'
      this.type = 'edit'
      this.dialogFormVisible = true
    },
    // 对话框的取消显示
    handleCancelDialog() {
      this.dialogFormVisible = false
      this.form = {
        id: undefined,
        name: '',
        router: '',
        component: '',
        componentName: '',
        icon: '',
        sortNumber: '',
        moduleStatus: 1,
        parentId: this.form.parentId,
        parentName: this.form.parentName,
        moduleType: 0
      }
    },
    // 删除菜单
    handleDelete(row) {
      // 单个删除
      this.$confirm('此操作将永久删除, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.doDelete([row.code])
        })
        .catch(() => {})
    },
    // 执行删除操作
    doDelete(uids) {
      // deleteModule(uids).then((res) => {
      // if (res.success) {
      this.$message({ message: '删除成功', type: 'info' })
      this.search()
      // } else this.$message.error(res.message)
      // })
    },

    // 切换搜索条件时，页码重置
    handleResetPage() {
      this.listQuery.pageVO.pageIndex = 1
      this.search()
    },
    handleSizeChange(val) {
      // 切换每页显示个数
      this.listQuery.pageVO.pageSize = val
      this.listQuery.pageVO.pageIndex = 1
      this.search()
    },
    handleCurrentChange(val) {
      // 切换页码
      this.listQuery.pageVO.pageIndex = val
      this.search()
    }
  }
}
</script>
<style lang="scss" scoped>
.el-select {
   width: 100%;
}
</style>

